<template>
  <div class="singerid">
      <nav1></nav1>
      <h1>热门歌曲</h1>
      <div class="song">
          <ul>
              <li >歌曲</li>
              <li>歌手</li>
              <li>专辑</li>
          </ul>
      </div>
      <div class="hotsong">
          <ul>
              <li v-for="(item,index) in list2.list" :key="index">
                 <p  @click="songmid(item.musicData.songmid,list2.singer_name,item.musicData.songname)"> {{item.musicData.songorig}}</p>
                 <div>
                     {{item.singer_name}}
                     <span v-for="(item2,index) in item.musicData.singer" :key="index + '-only1'">{{item2.name}}</span>
                 </div>
                 <p class="p1">{{item.musicData.albumname}}</p>
              </li>
              
               
          </ul>
      </div>
       <div class="key">
            <el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number>
       </div>
       <div class="mv">
           <h1>MV</h1>
           <ul>
               <li v-for="(item,index) in mvlist" :key="index" @click="getmv(item.vid)">
                    <img src="../../assets/img/open.png" alt="" id="img">
                   <img :src="item.pic" alt="">
                   <p>{{item.title}}</p>
               </li>
           </ul>
       </div>
       
  </div>
</template>

<script>
import {mvlist} from '../../api/mv'
import {list} from '../../api/ranklist'
import nav1 from '../../components/nav'
export default {
    components:{
        nav1
    },
    data(){
        return {
            list2:[],
            list1:[],
           
            num: 1,
            key:'', 
            mvlist:[] 
             
        }
    },
    
   methods:{
        handleChange(value) {
        this.num=value
        this.getsingerid()
      },
      songmid(i,j,n){
          this.key=i
          
           this.$router.push({
              path:'/song',
              query:{
                  songid:i,
                  name:j,
                  songname:n
                 
              }
          })
       
      },
    
        getsingerid(){
            var id=this.$route.query.id
            var msg=this.$route.query.singermid
            var singerid=this.$route.query.sin
            this.axios.get(`${list}/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0&singermid=${msg||id||singerid}&order=listen&begin=${this.num}&num=15&songstatus=1`)
            .then(res=>{
                this.list2=res.data.data
                console.log(res.data.data);
            }).catch(err=>{
                console.log(err);
            })  
        },
        mv(){
            var id=this.$route.query.id
            var ms=this.$route.query.singermid
             var singerid=this.$route.query.sin
            this.axios.get(`${mvlist}/singer/mv?singermid=${ms||id||singerid}`,{
                type:100
            }).then(res=>{
                // console.log(res.data.data.list);
                console.log(ms);
                this.mvlist=res.data.data.list
            }).catch(err=>{
                console.log(err);
            })
        },
        getmv(i){
            console.log(i);
            this.$router.push({
                path:'/mvdetail',
                query:{
                    getmv:i
                }
            })
        }

   
          
   
    },

    created(){
       this. mv()
        this.getsingerid()

         
    },
    
}
</script>

<style lang="scss" scoped>
.singerid{
    width: 1400px;
    margin: 0 auto;
    // margin-top: 150px;
    h1{
        margin-top: 150px;
    }
    .song{
        margin-top: 30px;
        ul{
            width: 1000px;
            display: flex;
            justify-content: space-between;
        }
    }
    .hotsong{
    //    border: 1px solid;
        ul{
            margin-top: 30px;
            li{
                overflow: hidden;
                 width: 1020px;
                // display: flex;
                // border: 1px solid;
                justify-content: space-between;
                margin-top: 20px;

                div{
                    // border: 1px solid;
                    overflow: hidden;
                    width: 150px;
                    display: flex;
                    margin-left: 460px;
                     margin-top: -20px;
                    // margin-right: 400px;
                   
                }
                .p1{
                    float: right;
                     margin-top: -20px;
                    
                }
            }
        }
    }
    .key{
        width: 150px;
        margin: 40px auto;
    }
   
}
 .mv{
    
        ul{
            display: flex;
             width: 1200px;
             flex-wrap: wrap;
             justify-content: space-between;
              

            li{
                width: 300px;
                position: relative;
                width: 200px;
                // margin-left: 150px;
                margin-right: 101px;
                p{
                    text-align: center;
                }
                img{
                    width: 300px;
                    height: 200px;
                     transition:all .6s;
                -webkit-transition:all .6s;
                }
                 img:hover{
                    transform: scale(1.05);
                 
                }
                 #img{
              width: 48px;
              height: 48px;
            //   background-color: #fff;
              position: absolute;
              top: 28%;
              left: 52%;
              z-index: 99;
                transition:all .6s;
                -webkit-transition:all .6s;
             
           }
            #img:hover{
                    transform: scale(1.05);
                 
                }
            }
        }
    }
</style>